import { NavLink, useNavigate } from "react-router-dom"
import { Button, Form, Input, message } from 'antd';
import { useRequest } from 'ahooks'
import { login } from '../api/user' 

type FieldType = {
    username: string;
    password: string;
  };
  

function LoginPage(){
    const nav = useNavigate();  
    const {run,loading} = useRequest((data: FieldType) => login(data),{
        manual:true,
        onSuccess:({data})=>{
            localStorage.setItem('token',data.data)
            nav('/course')
        }
    })
    return (
        <div>
            <div>
                <h1 className="text-center text-3xl">nest登录</h1>
                <div className="h-full">
                    <Form
                        name="basic"
                        labelCol={{ span: 8 }}
                        wrapperCol={{ span: 16 }}
                        style={{ maxWidth: 600 }}
                        initialValues={{ remember: true }}
                        onFinish={run}
                        autoComplete="off"
                        className="mx-auto mb-1 mt-1"
                    >
                        <Form.Item<FieldType>
                        label="Username"
                        name="username"
                        rules={[{ required: true, message: 'Please input your username!' }]}
                        >
                        <Input />
                        </Form.Item>

                        <Form.Item<FieldType>
                        label="Password"
                        name="password"
                        rules={[{ required: true, message: 'Please input your password!' }]}
                        >
                        <Input.Password />
                        </Form.Item>

                        <Form.Item label={null}>
                        <Button type="primary" htmlType="submit">
                            登录
                        </Button>
                        </Form.Item>
                    </Form>
                    <div className="w-full text-center">
                        <NavLink to="/register">前往注册</NavLink>
                    </div>
                </div>
            </div>
        </div>
    )
}
export default LoginPage